<template>
  <uni-popup ref="popup" type="right" style="z-index: 910">
    <view class="popup">
      <view class="center search">
        <uni-section title="本地数据" type="line">
          <uni-data-select v-model="value" :localdata="ranges" @change="changeState" styleItem="friend"
            icon="touch"></uni-data-select>
        </uni-section>
        <input class="uni-input" confirm-type="search" placeholder="搜索" v-model="search" />
      </view>
      <view style="width:100%;height:74vh;overflow: auto;">
        <view class="direction-start" style="margin-top:20rpx;" v-for="(item,index) in listAll" :key="index">
          <view>{{item.name}}</view>
          <view class="center list" style="flex-wrap: wrap;">
            <view v-for="(items,indexs) in item.data" :key="indexs"
              :class="label===items.name?'active':line===items.name?'active':''"
              @click="tabCahnge(item.type,items.name)">{{items.name}}
            </view>
          </view>
        </view>
      </view>
      <view class="center lis" style="justify-content: space-around;">
        <view @click="submit(1)">重置</view>
        <view @click="submit(2)">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getUserSearch } from '@/gql/earthPushing/custom';
  import { toPublish } from '@mqtt';
  import { getDriverID } from '@/stores/driverID';
  const staff_id = getDriverID();
  const emit = defineEmits(['submit']);
  const popup = ref(null)
  const search = ref()
  const type = ref('cart_code')
  const value = ref(0);
  const ranges = [
    { value: 0, text: '车牌号', type: 'cart_code' },
    { value: 1, text: '手机号', type: 'mobile' },
    { value: 2, text: '昵称', type: 'realname' },
  ];
  const label = ref('')
  const line = ref('')
  const listAll = ref([])
  init()
  function init() {
    const payload = {
      query: getUserSearch,
      variables: {
        staff_id,
      },
    };
    toPublish(
      'ql/staff/getUserSearch',
      payload,
      (obj : any) => {
        const { getUserSearch } = obj.data;
        listAll.value = getUserSearch
      },
    );
  }
  function tabCahnge(type : string, name : string) {
    if (type === 'label') {
      label.value = name
    } else {
      line.value = name
    }
  }
  /**
   * 切换选择类型
   */
  function changeState(e : any) {
    console.log('e:', e);
    type.value = ranges[e].type
  }
  function submit(num : number) {
    switch (num) {
      case 1:
        del()
        break;
      case 2:
        console.log(label.value, line.value, search.value)
        emit('submit', label.value, line.value, search.value, type.value)
        close()
        break;
    }
  }
  function del() {
    label.value = ''
    line.value = ''
    search.value = ''
  }
  function open() {
    del()
    popup.value.open();
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    open,
    close,
    init
  });
</script>
<style scoped lang="less">
  .popup {
    width: 650rpx;
    height: 100vh;
    background-color: #fff;
    bottom: 0px;
    padding: 100rpx 20rpx 20rpx;
    box-sizing: border-box;

    .search {
      width: 100%;
      background-color: #eee;
      border-radius: 5px;
      padding: 0px 10rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;

      input {
        text-align: center;
      }
    }

    .list {
      view {
        width: 173rpx;
        height: 63rpx;
        border: 1px solid #999999;
        border-radius: 5px;
        justify-content: center;
        text-align: center;
        line-height: 63rpx;
        margin: 15rpx 15rpx 15rpx 0px;
      }

      .active {
        border: 1px solid #558AF1;
        color: #558AF1;
      }
    }

    .lis {
      view {
        width: 240rpx;
        height: 90rpx;
        text-align: center;
        line-height: 90rpx;
        border-radius: 5px;
        margin-top: 20rpx;
      }

      view:nth-of-type(1) {
        border: 1px solid #558AF1;
        color: #558AF1;
        box-sizing: border-box;
      }

      view:nth-of-type(2) {
        background: #558AF1;
        color: #fff;
      }
    }

  }
</style>